<template>
    <el-button type="primary" @click="handleadd">新增</el-button>
    <el-button>全部展开</el-button>
    <el-table :data="meuns">

        <el-table-column prop="meunId" label="菜单ID" />
        <el-table-column prop="meunName" label="菜单名称" />
        <el-table-column prop="meunIcon" label="图标" />
        <el-table-column prop="meunType" label="类型" />
        <el-table-column prop="meunOpen" label="打开方式" />
        <el-table-column prop="pid" label="排序" />
        <el-table-column prop="meunUrl" label="路由" />
        <el-table-column prop="meunAuth" label="授权标识" />
        <el-table-column prop="meunId" label="操作" width="180">
            <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row.meunId)">修改</el-button>
                <el-button link type="danger" @click="MeunDel(scope.row.meunId)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <div>
        <el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose">
            <span>
                <el-form :model="meunlist">
                    <el-form-item label="菜单名称">
                        <el-input v-model="meunlist.meunName" />
                    </el-form-item>
                    <el-form-item label="图标">
                        <el-input v-model="meunlist.meunIcon" />
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-input v-model="meunlist.meunType" />
                        <el-radio-group v-model="meunlist.meunType">
                            <el-radio label="菜单" size="large">菜单</el-radio>
                            <el-radio label="按钮" size="large">按钮</el-radio>
                            <el-radio label="接口" size="large">接口</el-radio>

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="打开方式">

                        <el-radio-group v-model="meunlist.meunOpen">
                            <el-radio label="内部打开" size="large">内部打开</el-radio>
                            <el-radio label="外部打开" size="large">外部打开</el-radio>


                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="meunlist.pid" />
                    </el-form-item>
                    <el-form-item label="路由">
                        <el-input v-model="meunlist.meunUrl" />
                    </el-form-item>
                    <el-form-item label="授权标识">
                        <el-input v-model="meunlist.meunAuth" />
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="MeunAdd">添加</el-button>
                    </el-form-item>
                </el-form>

            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="dialogVisible1" title="修改" width="500">
            <span>
                <el-form :model="meunlist">
                    <el-form-item label="菜单名称">
                        <el-input v-model="meunlist.meunName" />
                    </el-form-item>
                    <el-form-item label="图标">
                        <el-input v-model="meunlist.meunIcon" />
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-input v-model="meunlist.meunType" />
                        <el-radio-group v-model="meunlist.meunType">
                            <el-radio label="菜单" size="large">菜单</el-radio>
                            <el-radio label="按钮" size="large">按钮</el-radio>
                            <el-radio label="接口" size="large">接口</el-radio>

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="打开方式">

                        <el-radio-group v-model="meunlist.meunOpen">
                            <el-radio label="内部打开" size="large">内部打开</el-radio>
                            <el-radio label="外部打开" size="large">外部打开</el-radio>


                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="meunlist.pid" />
                    </el-form-item>
                    <el-form-item label="路由">
                        <el-input v-model="meunlist.meunUrl" />
                    </el-form-item>
                    <el-form-item label="授权标识">
                        <el-input v-model="meunlist.meunAuth" />
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="MeunUpdate">修改</el-button>
                    </el-form-item>
                </el-form>

            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">Cancel</el-button>

                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const treeRef = ref([])
const axios = inject('axios') as AxiosStatic

const router = useRouter()
const route = useRoute()
onMounted(() => {
    GetMeuns()
})
//菜单显示
const meuns = ref([])

const GetMeuns = () => {
    axios.get('/RbacMan/GetMeuns',

    ).then(res => {
        meuns.value = res.data
    })
}
const meunlist = ref({
    "isDel": false,
    //  "addNmae": "",
    //"updateName": ",
    // "delNmae": "string",
    // "addTime": "2024-07-15T04:05:25.749Z",
    // "updateTime": "2024-07-15T04:05:25.749Z",
    // "delTime": "2024-07-15T04:05:25.749Z",
    // "meunId": 0,
    "meunName": "",
    "meunIcon": "",
    "meunType": "",
    "meunOpen": "",
    "sort": 0,
    "pid": 0,
    "meunUrl": "",
    "meunAuth": "",
    "remark": ""
})
//菜单新增
const handleadd = () => {

    dialogVisible.value = true
}
//添加菜单
const MeunAdd = () => {
    axios.post('/RbacMan/MeunAdd', meunlist.value

    ).then(res => {
        console.log(res.data)
        if (res.data > 0) {
            ElMessage.success('添加成功')
            dialogVisible.value = false
        } else {

            ElMessage.error('添加失败')
            return;
        }
        GetMeuns()
    })
}
//菜单修改
const handleEdit = (meunId: any) => {
    dialogVisible1.value = true
    GetMeunById(meunId)
}
//修改反填
const GetMeunById = (meunId: any) => {
    axios.get('/RbacMan/GetMeunById', {
        params: {
            meunId: meunId
        }
    }

    ).then(res => {
        console.log(res.data)
        meunlist.value = res.data
    })
}
//修改
const MeunUpdate = () => {
    axios.post('/RbacMan/MeunUpdate', meunlist.value

    ).then(res => {
        console.log(res.data)
        if (res.data > 0) {
            ElMessage.success('修改成功')
            dialogVisible1.value = false
        } else {

            ElMessage.error('修改失败')
            return;
        }
        GetMeuns()
    })
}

//菜单的删除 MeunDel
const MeunDel = (meunId: number) => {
    console.log(meunId)
    ElMessageBox.confirm(
        '确定要删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // axios.post('/RbacMan/MeunDel',

        axios({
            url: "/RbacMan/MeunDel",
            method: 'post',
            params: {
                meunId: meunId
            }

        })



            .then(res => {
                console.log(res.data)
                if (res.data == 1) {
                    ElMessage.success('删除成功')
                    GetMeuns()
                } else if (res.data == -1) {
                    ElMessage.error('删除失败,有子菜单')
                    return;
                } else {

                    ElMessage.error('删除失败')
                    return;
                }
            })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}


</script>